<template>
  <div>
    <el-row>
      <div>
      <el-col :span="3"> <p>付款方名称</p></el-col>
      <el-col :span="5">
        <el-input v-model="search.name" placeholder="请输入查询关键字"></el-input>
      </el-col>
      <el-col :span="4"> <p>应付金额大于等于</p></el-col>
      <el-col :span="5">
        <el-input v-model="search.payable" placeholder="请输入金额"></el-input>
      </el-col>
      <el-col :span="1">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="select()"
        ></el-button>
      </el-col>
      </div>
      <el-col :span="5">
        <el-button
          type="success"
          icon="el-icon-search"
          @click="changeButtonText"
          >{{ buttonText }}</el-button
        >
      </el-col>
      <el-table
        ref="multipleTable"
        :data="receive"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column prop="id" label="序号" width="120" align="center">
          <!-- 如果想要在el-table-column的子标签获取到属性值，必须通过插槽方式获取 
                            scope里面封装carts数组对象   row代表当前行的元素（数组中的某个元素）
                           -->
        </el-table-column>
        <el-table-column prop="supplierList.name" label="收款方" width="140" align="center">
        </el-table-column>
        <el-table-column prop="orderList.no" label="单号" align="center">
        </el-table-column>
        <el-table-column
          prop="payable"
          label="应收款金额"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="createtime"
          label="时间"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column  prop="type" label="类型" width="200" align="center" :formatter="showdiff" >
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
           <template slot-scope="scope">
          <span v-if="scope.row.status === 1">未付款</span>
          <span v-else>未付款</span>
        </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="topay(scope.row.id)"
           
              >付款</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10]"
        :page-size="size"
        layout="prev, pager, next, jumper, total, sizes"
        :total="total"
      >
      </el-pagination>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      buttonText: "货款",
      page: 1,
      size: 5,
      total: 0,
      totalPage: 0,
      typeFromBackend:1,
      receive: [
       
      ],
      search:{
         page: 1,
         size: 5,
         name:"",
         payable:"",
      }
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    changeButtonText() {
      if (this.buttonText === "退款") {
        this.buttonText = "货款";
         this.getData();
      } else {
        this.buttonText = "退款";
        this.$axios
        .get("/pay/findByRefund/" + this.page + "/" + this.size)
        .then((res) => {
          // res.data   response result
          // res.data.data respage
          // res.data.data.data list
          let resPage = res.data.data;

          this.page = resPage.curPage;
          this.total = resPage.total;
          this.totalPage = resPage.totalPage;
          this.receive = resPage.data;
          
        });
      }
    },
    handleSizeChange(val) {
      this.size = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    select() {
        //   this.$axios
        // .get("/pay/findByPay/" + this.page + "/" + this.size)
        // .then((res) => {
        //   // res.data   response result
        //   // res.data.data respage
        //   // res.data.data.data list
        //   let resPage = res.data.data;

        //   this.page = resPage.curPage;
        //   this.total = resPage.total;
        //   this.totalPage = resPage.totalPage;
        //   this.receive = resPage.data;
        // });
      this.$axios.post("/pay/findByCondition",this.search)
      .then(res=>{
        this.receive = res.data.data.data
        this.search.page = res.data.data.curPage
        this.total = res.data.data.total
      })
    },
    getData() {
      this.$axios
        .get("/pay/findByPay/" + this.page + "/" + this.size)
        .then((res) => {
          // res.data   response result
          // res.data.data respage
          // res.data.data.data list
          let resPage = res.data.data;

          this.page = resPage.curPage;
          this.total = resPage.total;
          this.totalPage = resPage.totalPage;
          this.receive = resPage.data;
        }); 
    },
     showdiff(row, column) {
    if (row.type === 0) {
      return '货款'
    } else  {
      return '退款'
    } 
  },
    topay(id){
      this.$axios.delete("/pay/gopay/"+id).then(res=>{
         if(res.data.code == 200){
          this.$message.success("支付成功")
          this.getData()
        }
      })
    }
  },
};
</script>
<style scoped>
</style>